<template>
  <div class="shop-bar">
    <div class="choose-content" v-if="show_choose_content">
      <div class="content-top">
        <div class="clear-car" @click="clearAll">清空购物车</div>
      </div>
      <div  class="choose-item" v-for="item in data.chooseList">
        <div class="item-name">{{item.name}}</div>
        <div class="price">¥{{item.min_price * item.chooseCount}}</div>
        <div class="select-content">
          <div class="minus" @click="minus(item)"></div>
          <div class="count">{{item.chooseCount}}</div>
          <div class="plus" @click="plus(item)"></div>
        </div>
      </div>
    </div>
    <div class="bottom-content"  @click="showChooseContentchange">
      <div  class="shop-icon">
         <div class="dot-num" v-if="data.dotNum>0">{{data.dotNum}}</div>
      </div>
      <div class="price-content">
        <p class="total-price">¥{{data.totalPrice}}</p>
        <p class="other-price">另需配送&nbsp;¥{{shipping_fee}}</p>
      </div>
      <div class="submit-btn" @click.stop="submit">去结算</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {

      }
    },
    computed: {
      shipping_fee(){
       return this.book_list_data.poi_info ? this.book_list_data.poi_info.shipping_fee : 0;
      },
      ...mapState(['book_list_data','show_choose_content']),
      data(){
        let listData = this.book_list_data.food_spu_tags || [];
        let totalPrice = 0;
        let dotNum = 0;
        let chooseList = [];

        for (let i = 0 ; i< listData.length ; i++) {
          let spus = listData[i].spus || [];
          for (let j = 0 ; j < spus.length ; j++) {
            let chooseCount = spus[j].chooseCount;
            if (chooseCount > 0) {
              dotNum += chooseCount;
              spus[j]._index = j;
              spus[j]._outIndex = i;
              chooseList.push(spus[j]);
              totalPrice += spus[j].min_price * chooseCount;
            }
          }
        }

        return {
          dotNum,
          totalPrice,
          chooseList
        }
      }
    },
    components: {

    },
    mounted() {

    },
    methods:{
      minus(item){
        //减一项
        this.$store.commit('minus',{index:item._index,outIndex:item._outIndex})
        this.$forceUpdate()
        this.$emit('changeData')
      },
      plus(item){
        //加一项
        this.$store.commit('plus',{index:item._index,outIndex:item._outIndex})
        this.$forceUpdate()
        this.$emit('changeData')
      },
      showChooseContentchange(){
        this.$store.commit('showChooseContentChange')
      },
      clearAll(){
        this.$store.commit('clearAll')
        this.$forceUpdate()
        this.$emit('changeData')
      },
      submit(){
        alert('已下单')
      }
    }
  }
</script>

<style lang="stylus">
  .shop-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    .bottom-content {
      height: (1rem);
      display: flex;
      background-color: rgba(51,51,51,0.9);
    }
    .shop-icon {
      width: (1.1rem);
      height: (1.12rem);
      background-image: url('/app2/img/shop-icon.png');
      background-size: cover;

      margin-top: (-0.3rem);
      margin-left: (0.24rem);

      position: relative;
    }
    .price-content {
      flex: 1;
      padding-top: (0.16rem);
      padding-left: (0.14rem);
    }
    .total-price {
      font-size: (20px);
      color: #fff;
    }
    .other-price {
      font-size: (12px);
      color: #999;
      margin-top: (0.04rem);
    }

    .dot-num {
      position: absolute;
      background-color: #fb4e44;
      width: (0.3rem);
      height: (0.3rem);
      font-size: (12px);
      color: #fff;
      border: 1px solid #fff;
      top: (0.04rem);
      right: 0;
      border-radius: 50%;
      text-align: center;
      line-height: (0.32rem);
    }
    .submit-btn {
      width: (2.2rem);
      height: 100%;
      background-color: #ffd161;
      color: #333;
      font-size: (16px);
      line-height: (1rem);
      text-align: center;
    }
    .choose-content {
      background-color: #fff;
    }
    .content-top {
      height: (0.7rem);
      background-color: #f4f4f4;
      font-size: (11px);

      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .clear-car {
      margin-left: (0.2rem);
      margin-right: (0.1rem);
      &:before {
        content: '';
        width: (0.26rem);
        height: (0.26rem);
        display: block;
        background-image: url('/app2/img/clear.jpeg');
        background-size: cover;

        float: left;
        margin: (-0.02rem);
        margin-right: (0.04rem);
      }
    }
    .choose-item {
      display: flex;
      font-size: (15px);
      color: #2f2f2f;
      height: (0.7rem);
      align-items: center;
      padding-top: (0.2rem);
      padding-bottom: (0.2rem);
      border-bottom: 1px solid #ddd;
      .price {
        margin-left: (0.1rem);
        margin-right: (0.5rem);
      }
    }
    .item-name {
      flex: 1;
      padding-left: (0.2rem);
    }
    .select-content {
      position: relative;
      display: flex;
      margin-right: (0.16rem);
    }
    .plus {
      width: (0.5rem);
      height: (0.5rem);
      background-size: 100% 100%;
      background-image: url('/app2/img/plus.png');
    }
    .minus {
      width: (0.5rem);
      height: (0.52rem);
      background-size: 100% 100%;
      background-image: url('/app2/img/minus.png');
    }
    .count {
      font-size: (15px);
      color: #2f2f2f;
      width: (0.4rem);
      height: (0.5rem);
      line-height: (0.5rem);
      margin-left: (0.04rem);
      margin-right: (0.04rem);
      text-align: center;
    }
  }
</style>
